<template>
  <div class="switch-i18n-wrapper">
    <el-button class="i18n-btn"
      :key="index"
      v-for="(item, index) in btns"
      :type="locale === item.key ? 'primary' : 'default'"
      @click="handleChangeI18n(item)">{{item.title}}</el-button>
  </div>
</template>

<script>
  import { I18N_CONFIG } from 'src/i18n'
  export default {
    data () {
      return {
        btns: I18N_CONFIG
      }
    },
    computed: {
      locale () {
        return this.$store.state.locale
      }
    },
    methods: {
      handleChangeI18n (item) {
        this.$store.commit('SWITCH_I18N', item.key)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .switch-i18n-wrapper{
    font-size: 0;
    .i18n-btn{
      margin-left: 0;
      border-radius: 0;
      font-size: 14px;
      &:first-child{
        border-right: 0;
        border-radius: 3px 0px 0px 3px;
      }
      &:last-child{
        border-left: 0;
        border-radius: 0px 3px 3px 0px;
      }
    }
  }
</style>
